<template>
  <el-form-item
    :rules="rule"
    class="xmf-input"
    :label="label"
    :prop="prop"
    clearable
  >
    <el-input
      :rows="rows"
      :type="type"
      :maxlength="maxlength"
      :disabled="isDisabled"
      show-word-limit=""
      v-model="title"
      :placeholder="XMPlaceholder"
      :style="{ width: $slots.default ? '85%' : '100%' }"
      @blur="inputBlur"
    ></el-input>
    <!-- <slot /> -->
    <span :style="{ width: $slots.default ? '15%' : '0%' }">
      <slot />
    </span>
  </el-form-item>
</template>
<script>
  import { computed, toRefs } from '@vue/reactivity'
  export default {
    name: 'XmFIntput',
    props: {
      modelValue: [String, Number],
      label: String,
      type: String,
      prop: String,
      rows: {
        type: Number,
        default() {
          return 4
        },
      },
      maxlength: [String, Number],
      showWordLimit: Boolean,
      quick: Boolean,
      foots: String,
      isDisabled: Boolean,
      placeholder: String,
    },
    setup(props, context) {
      let title = computed({
        get() {
          return props.modelValue
        },
        set(val) {
          context.emit('update:modelValue', val)
        },
      })
      // let placeholder = props.label
      //   ? '请输入' + props.label.replace(':', '').replace('：', '')
      //   : ''

      const XMPlaceholder = computed(() => {
        const { placeholder, label } = props
        if (placeholder) {
          return placeholder
        }
        return label ? '请输入' + label.replace(':', '').replace('：', '') : ''
      })
      let showLimit = computed(() => {
        if (props.showWordLimit !== null) {
          return props.showWordLimit
        }
        if (props.maxlength > 0) {
          return true
        }
        return false
      })

      const state = {
        rule: [{ required: props.quick, message: '不能为空' }],
      }

      function inputBlur() {
        console.log('inputBlur')
        context.emit('blur', props.modelValue)
      }
      return {
        title,
        XMPlaceholder,
        showLimit,
        inputBlur,
        ...toRefs(state),
      }
    },
  }
</script>
<style lang="scss" scoped>
  .xmf-input {
    position: relative;
    .el-form-item__content {
      display: flex;
    }
    .character-tips {
      width: 16px;
      height: 16px;
      background-color: red;
    }
  }
</style>
